import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class DropDownWidgetPage extends StatefulWidget {
  @override
  _DropDownWidgetPageState createState() => _DropDownWidgetPageState();
}

class _DropDownWidgetPageState extends State<DropDownWidgetPage> with TickerProviderStateMixin {
  bool _isDropDown = false;

  Animation<double> _heightAnimation;
  AnimationController _heightAnimationController;

  Animation<Color> _colorAnim;
  AnimationController _colorAnimationController;

  @override
  void initState() {
    _heightAnimationController = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);

    _heightAnimation = new Tween(begin: 0.0, end: 200.0).animate(_heightAnimationController)
      ..addListener(() {
        //这行如果不写，没有动画效果
        setState(() {});
      });

    _colorAnimationController = AnimationController(vsync: this, duration: const Duration(seconds: 2));
    _colorAnim = ColorTween(begin: Colors.transparent, end: Color(0x80000000)).animate(_colorAnimationController)
      ..addListener(() {
        setState(() {});
      });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("drop down widget"),
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 100.h,
              child: FlatButton(
                padding: EdgeInsets.all(0),
                onPressed: () {
                  if (_isDropDown) {
                    _heightAnimationController.reverse();
                    _colorAnimationController.reverse();
                  } else {
                    _heightAnimationController.forward();
                    _colorAnimationController.forward();
                  }
                  _isDropDown = !_isDropDown;
                },
                child: Text("drop down"),
              ),
            ),
            Expanded(
              flex: 1,
              child: Stack(
                children: <Widget>[
                  Container(
                    child: CustomScrollView(
                      shrinkWrap: true,
                      slivers: <Widget>[
                        SliverToBoxAdapter(
                          child: Text(
                            "sadsadsad" * 1000,
                            maxLines: 30,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        SliverToBoxAdapter(
                          child: Text(
                            "sadsadsad" * 1000,
                            maxLines: 30,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Offstage(
                    offstage: _getMaskOffstage(),
                    child: Container(
                      width: double.infinity,
                      color: _colorAnim.value ?? Colors.transparent,
                    ),
                  ),
                  Container(
                    color: Colors.redAccent,
                    height: _heightAnimation.value ?? 0,
                    child: ListView(
                      children: <Widget>[
                        ListTile(
                          leading: Icon(Icons.build),
                          title: Text("aaa"),
                        ),
                        ListTile(
                          leading: Icon(Icons.build),
                          title: Text("aaa"),
                        ),
                        ListTile(
                          leading: Icon(Icons.build),
                          title: Text("aaa"),
                        ),
                        ListTile(
                          leading: Icon(Icons.build),
                          title: Text("aaa"),
                        ),
                        ListTile(
                          leading: Icon(Icons.build),
                          title: Text("aaa"),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  bool _getMaskOffstage() {
    if (_colorAnim.value == null || _colorAnim.value == Color(0x00000000)) {
      return true;
    }
    return false;
  }

  @override
  void dispose() {
    _colorAnimationController.dispose();
    _heightAnimationController.dispose();
    super.dispose();
  }
}
